<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-dom增删改练习</title>
    <style>
        #employeeTable {
            border-collapse: collapse;
            border: none;
            margin: 50px auto;
        }

        #employeeTable th,
        #employeeTable td {
            border: 1px solid #000;
        }

        #formDiv {
            text-align: center;
            width: 250px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>

    <script>
        //删除tr的响应函数
        function delA() {
            var tr = this.parentNode.parentNode;
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            var flag = confirm("确认删除" + name + "吗？");
            if (flag) {
                tr.parentNode.removeChild(tr);
            }
            return false;
        }


        window.onload = function () {

            /*点击超链接以后，删除一个员工的信息*/

            var allA = document.getElementsByTagName("a");

            //为每一个a绑定单击响应函数
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = function () {

                    //点击哪个超链接，this就是谁
                    //获取tr(超链接所在的那一行)                
                    var tr = this.parentNode.parentNode;

                    //获取要删除员工的名字
                    var name = tr.getElementsByTagName("td")[0].innerHTML;

                    //删除之前弹出提示框
                    var flag = confirm("确认删除" + name + "吗？");

                    //删除tr
                    if (flag) {
                        tr.parentNode.removeChild(tr);
                    }

                    //通过在响应函数的最后使用 return false;去除点击超链接就跳转页面的默认行为    
                    return false;
                }
            }


            /*点击按钮后，将员工的信息添加到表格中:方式一*/

            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {

                //获取员工信息
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;

                /*  <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="deleteEmp?id=001">Delete</a></td>
                    </tr>
                */


                /*创建元素*/

                //创建tr
                var tr = document.createElement("tr");
                //创建td
                var nameTd = document.createElement("td");
                var emailTd = document.createElement("td");
                var salaryTd = document.createElement("td");
                var aTd = document.createElement("td");
                //创建a
                var a = document.createElement("a");


                /*创建元素内部的文本*/

                //创建文本节点
                var nameText = document.createTextNode(name);
                var emailText = document.createTextNode(email);
                var salaryText = document.createTextNode(salary);
                var delText = document.createTextNode("Delete");


                /*搭建tr*/

                //将文本添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emailText);
                salaryTd.appendChild(salaryText);

                a.appendChild(delText);

                //将元素a添加到aTd中
                aTd.appendChild(a);

                //将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd);

                //向a添加href属性s
                a.href = "###";
                a.onclick = delA;

                //获取table
                var employeeTable = document.getElementById("employeeTable");
                //获取employeeTable中的tbody
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                //将tr添加到tbody中
                tbody.appendChild(tr);


                /*点击按钮后，将员工的信息添加到表格中:方式二*/
                var tr = document.createElement("tr");
                tr.innerHTML = "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href='deleteEmp?id=001'>Delete</a></td>";

                var a = tr.getElementsByTagName("a")[0];
                a.onclick=delA;

                var employeeTable = document.getElementById("employeeTable");
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr);

            }




        };
    </script>
</head>

<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@jerry.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Lyn</td>
            <td>lyn@lyn.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>

</body>

</html>